<template>
  <ReportPage>
    <q-table
      class="my-table card-radius"
      wrap-cells
      flat
      bordered
      title="NFF Records"
      titleClass="page-header"
      :columns="columns"
      :rows="filterRows"
      :filter="filter"
      :pagination="{ rowsPerPage: 100 }"
      row-key="id"
      no-data-label="No history found."
      no-results-label="The filter didn't uncover any results"
      >
      <!-- @row-dblclick="onRowClick" -->

      <template v-slot:top-row="props">
          <ColsFilter :filter="props.cols" ref="colsFilter"></ColsFilter>
      </template>
      

      <template v-slot:top-right>
        <q-card-actions>
          <q-btn
            color="primary"
            icon-right="archive"
            label="Export to csv"
            no-caps
            @click="exportTable(columns, filterRows, header)"
          />
        </q-card-actions>
      </template>
      
      <template v-slot:body-cell-detail="props">
        <q-td>
          <q-btn
            class="q-mr-sm"
            size="sm"
            style="padding:0 10px"
            color="indigo-8"
            label="Detail"
            no-caps
            @click="openOrderDetail(props.row.id, props.row.part_id)"
          />
        </q-td>
      </template>

      <template v-slot:no-data="{ icon, message }">
        <div class="full-width row flex-center text-accent q-gutter-sm">
          <!-- <q-icon size="2em" name="sentiment_dissatisfied" /> -->
          <q-icon size="2em" :name=icon />
          <span> {{ message }} </span>
        </div>
      </template>
    </q-table>
  </ReportPage>
</template>

<script setup lang="ts">
import ReportPage from 'src/pages/ReportPage.vue';
import { HistoryReport, RepairOrderNFFRecord } from 'src/services/type';
import { computed, ref } from 'vue';
import { QTableColumn } from 'quasar';
import { exportTable } from 'src/utils/exportCsvUtils';
import { getNFFRecord } from 'src/services/reportService';
import { formatDateTimeString } from 'src/utils/dateUtils';
import MyBigDialog from '../container/MyBigDialog.vue';
import OrderDetailPage from '../maintenance/OrderDetailPage.vue';
import FinalCheckForm from '../maintenance/FinalCheckForm.vue';
import { useRouter } from 'vue-router';
import ColsFilter from '../table/ColsFilter.vue';

const header = ref('History');
const filter = ref('');

const align = 'left'

const columns: QTableColumn[] = [
/*   {
    name: 'id',
    label: '#',
    align,
    field: 'id',
    headerStyle: 'width: 80px !important', 
    sortable: true,
  }, */
  {
    name: 'job_order',
    align,
    label: 'Job Order',
    field: 'jo',
    headerStyle: 'width: 100px !important', 
    sortable: true,
  },
  {
    name: 'system',
    align,
    label: 'System',
    field: 'system',
    sortable: true,
  },
  {
    name: 'serial_no',
    align,
    label: 'Serial No.',
    field: 'serial_no',
    sortable: true,
  },
  {
    name: 'stock_code',
    align,
    label: 'Stock Code',
    field: 'stock_code',
    sortable: true,
  },
  {
    name: 'workgroup',
    align,
    label: 'Work Group',
    field: 'workgroup',
    sortable: true,
  },
  {
    name: 'deliver_to',
    align,
    label: 'Deliver To',
    field: 'deliver_to',
    sortable: true,
  },
  {
    name: 'repair_details',
    align,
    label: 'Repair Details',
    field: 'repair_details',
    sortable: true,
  },
  {
    name: 'status',
    align,
    label: 'Order Status',
    field: 'status',
    sortable: true,
  },
  {
    name: 'check_in',
    align,
    label: 'Check In Time',
    field: 'check_in',
    format: (val)=>formatDateTimeString(val),
    headerStyle: 'width: 100px !important', 
    sortable: true,
  },
  {
    name: 'check_out',
    align,
    label: 'Check Out Time',
    field: 'check_out',
    format: (val)=>formatDateTimeString(val),
    headerStyle: 'width: 100px !important', 
    sortable: true,
  },
/*   {
    name: 'detail',
    align,
    label: '',
    field: 'detail',
  } */
];


/* const = ref() */
const orderId = ref(0)
const partId = ref(0)
const serialNo = ref('')
const stockCode = ref('')
const isParent = ref(false)


const detail = ref(false)
const repairingDetail = ref(false)

const rows = ref<RepairOrderNFFRecord[]>()


async function init(){
  const res =  await getNFFRecord()
  console.log(res);
  
  rows.value = res
}

init()

function openOrderDetail(order_id: number, part_id:number){
  detail.value = true
  orderId.value =order_id
  partId.value =part_id
}



const router = useRouter();

function onRowClick(evt: any, row: any) {
 // maybe delete record

}

const colsFilter = ref<typeof ColsFilter>();

function filterFn(row: RepairOrderNFFRecord) {
  if (colsFilter.value) {
    return colsFilter.value.filterFn(row);
  }
}

const filterRows = computed(() => {
  return rows.value?.filter(filterFn);
});

// function dblclickFn(evt: any, row: RepairOrderNFFRecord, index: number) {
//   id.value = row.id ;
//   part_id.value = row.part_id ;
//   detail.value = true;
// }
</script>

<style scoped></style>
